<template>
    <div class="sys-wechatuser-container flex flex-col">
        <a-card class="mb-2.5">
            <common-form
                :model="state.queryForm"
                name="menu-form"
                @query="handleQuery"
                @reset="handleReset"
                :btn-show="{
                    add:false
                }"
            >
                <a-form-item
                    label="微信昵称"
                    name="nickName"
                    class="w-1/2.5"
                >
                    <a-input v-model:value="state.queryForm.nickName"/>
                </a-form-item>
                <a-form-item
                    label="手机号码"
                    name="mobile"
                    class="w-1/2.5"
                >
                    <a-input v-model:value="state.queryForm.mobile"/>
                </a-form-item>
            </common-form>
        </a-card>
        <a-card class="flex-1 card-table">
            <common-table 
                :columns="columns" 
                :data="state.tableData"
                :pagination="{
                        total: state.tableParams.total,
                        current: state.tableParams.page,
                        pageSize: state.tableParams.pageSize,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions:['2','5','10','20'],
                        showTotal:(total:number) => `总数: ${total}`
                }"
                :loading="state.loading"
                @change="changePagination"
            >
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'platformType'">
                        <a-tag color="cyan">
                            <template v-for="item in useMapDictList('PlatformTypeEnum')" :key="item.value">
                                <template v-if="record.platformType == 1 && record.platformType == item.value">{{ item.label }}</template>
                                <template v-if="record.platformType == 2 && record.platformType == item.value">{{ item.label }}</template>
                                <template v-if="record.platformType == 3 && record.platformType == item.value">{{ item.label }}</template>
                                <template v-if="record.platformType == 4 && record.platformType == item.value">{{ item.label }}</template>
                                <template v-if="record.platformType == 5 && record.platformType == item.value">{{ item.label }}</template>
                            </template>
                        </a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'avatar'">
                        <a-avatar :src="computedAvatarUrl(record.avatar)" shape="square" size="small">
                            <template #icon><UserOutlined /></template>
                        </a-avatar>
                    </template>
                    <template v-if="column.dataIndex === '性别'">
                        <a-tag color="green" v-if='record.sex === 0'>男</a-tag>
                        <a-tag color="cyan" v-else>女</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'operation'">
                        <div class="w-full">
                            <a-popconfirm
                                title="确定删除?"
                                @confirm="handleDelete(record)"
                            >
                                <a-button :icon="h(DeleteOutlined)" danger >删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </common-table>
        </a-card>
    </div>
</template>

<script setup lang="ts" name="weChatUser">
import { apiSysWechatUserPagePost } from '@/api/sys/sysWeChatUser';
import type { ResType } from '@/api/types';
import CommonForm from '@/components/common-form/index.vue'
import CommonTable from '@/components/common-table/index.vue'
import { h, onMounted, reactive } from 'vue';
import type { TableParamsResType } from '../onlineUser/type';
import type { ItemType } from './typs';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { useMapDictList } from '@/hooks';

defineOptions({
    name: "weChatUser",
})

const state = reactive({
    queryForm:{
        nickName:"",
        mobile:""
    },
    tableData:[] as any[],
    tableParams: {
		page: 1,
		pageSize: 50,
		total: 0 as any,
	},
    loading:false,
})

const columns:any[] = [
    {
        title: '序号',
        align: "center",
        width: 60,
        customRender: ({ index }:{index:number}) => {
            return `${ index + 1 }`;
        },
    },
    {
        title: 'OpenId',
        dataIndex: 'openId',
        key: 'openId',
        align: 'center',
        width: 80,
        ellipsis: true
    },  
    {
        title: 'UnionId',
        dataIndex: 'unionId',
        key: 'unionId',
        align: 'center',
        width: 80,
        ellipsis: true
    },  
    {
        title: '平台类型',
        dataIndex: 'platformType',
        key: 'platformType',
        align: 'center',
        width: 150,
        ellipsis: true
    },
    {
        title: '昵称',
        dataIndex: 'nickName',
        key: 'nickName',
        align: 'center',
        width: 80,
        ellipsis: true
    },    
    {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
        align: 'center',
        width: 100,
    },  
    {
        title: '手机号码',
        dataIndex: 'mobile',
        key: 'mobile',
        align: 'center',
        width: 130,
    },  
    {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        align: 'center',
        width: 80,
    }, 
    {
        title: '城市',
        dataIndex: 'city',
        key: 'city',
        align: 'center',
        width: 120,
    },   
    {
        title: '省',
        dataIndex: 'province',
        key: 'province',
        align: 'center',
        width: 120,
    }, 
    {
        title: '国家',
        dataIndex: 'country',
        key: 'country',
        align: 'center',
        width: 120,
    }, 
    {
        title: '操作',
        align: 'center',
        key:"operation",
        dataIndex: 'operation',
        width: 250,
        fixed: 'right',
    }
]

const computedAvatarUrl = (url: string) => {
	return import.meta.env.VITE_API_URL + '/' + url	
}
const handleQuery =async () => {
    state.loading = true
    let params = Object.assign(state.queryForm, state.tableParams);
    const res = await apiSysWechatUserPagePost(params) as ResType<TableParamsResType<ItemType>>
    state.tableData = res.data.result.items || []
    state.tableParams.total = res.data.result.total || 0
    state.loading = false
}

const handleReset = () => {

}
const handleDelete = async (record:ItemType) => {
	
}
const changePagination = async(pagination:{current:number,pageSize:number})=>{
    state.tableParams.page = pagination.current
    state.tableParams.pageSize = pagination.pageSize
    await handleQuery()
}
onMounted(async () => {
	await handleQuery();
});
</script>

<style lang="scss" scoped>
.sys-wechatuser-container{
    .card-table{
        :deep(.ant-card-body){
            height: 100%;
        }
    }
} 

:deep(.ant-table-cell-fix-right){
    // right: 0 !important;
}
:deep(.ant-btn >span) {
    display:inline-flex!important;
}
</style>